/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Button, Badge, Select, Switch, DatePicker,Descriptions,Tag} from 'antd';
import {connect} from 'dva';
import {routerRedux} from 'dva/router';
import {getTimeDistance } from '@/utils/utils';
import moment from 'moment'
import ReactEcharts from 'echarts-for-react';
const ButtonGroup = Button.Group;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showCustom: false,
      rangePickerValue: [moment(new Date().getFullYear() + '-' + (parseInt(new Date().getMonth()) + 1) + '-' + '01', 'YYYY-MM-DD'), moment(new Date(), 'YYYY-MM-DD')],
    };
  }

  componentDidMount() {
  }
  isActive(type) {
    const {rangePickerValue} = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return false;
    }
    if (rangePickerValue[0].isSame(value[0], 'day') && rangePickerValue[1].isSame(value[1], 'day')) {
      return true;
    }
  }
  selectDate = (type) => {
    const that=this;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    },function () {
      // that.fetch()
    });
  }
  getOption = () => {
    var lastMonth = [];
    for(var i = 0;i<30;i++){
      lastMonth.unshift(new Date(new Date()
        .setDate(new Date().getDate()-i))
        .toLocaleDateString())
    }
    let option = {
      background: 'rgba(0,0,0,1)',
      color: ['#3398DB','#fe5810'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['水表读数', '用水量'],
      },
      xAxis: [
        {
          type: 'category',
          data: lastMonth,
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '水表读数',
          min: 0,
          interval: 50,
          axisLabel: {
            formatter: '{value} 吨',
          },
        },
        {
          type: 'value',
          name: '用水量',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} 吨',
          },
        },
      ],
      grid: {
        top: '10%',
        left: '2%',
        right: '2%',
        bottom: '4%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider',
          show: false,
          xAxisIndex: [0],
        },
        {
          type: 'inside',
          xAxisIndex: [0],
        },
      ],
      series: [
        {
          name: '水表读数',
          type: 'bar',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2,  162.2, 162.2, 162.2, 162.2,  162.2, 162.2, 162.2, 162.2,  162.2, 162.2, 162.2, 162.2,  162.2, 162.2, 162.2,  162.2, 162.2, 172.2, 182.2,  192.2, 192.2, 192.2],
        },
        {
          name: '用水量',
          type: 'line',
          yAxisIndex: 1,
          symbolSize:8,
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 23.0, 16.5, 12.0, 6.2],
        },
      ],
    };
    return option;
  };
  render() {

    const props=this.props
    return (
      <div>
        <Descriptions title="水表基本信息" bordered>
          <Descriptions.Item label="水表号">15215230</Descriptions.Item>
          <Descriptions.Item label="户号">15215230</Descriptions.Item>
          <Descriptions.Item label="安装地址">广州市天河区</Descriptions.Item>
          <Descriptions.Item label="上传时间" span={3}>
            2019-04-24 18:00:00
          </Descriptions.Item>
          <Descriptions.Item label="状态" >
            <Badge status="processing" text="正常" />
          </Descriptions.Item>
          <Descriptions.Item label="阀门状态" span={2}>
            <Switch  checkedChildren="开启" unCheckedChildren="关闭" checked />
          </Descriptions.Item>
          <Descriptions.Item label="水表类型">DN150</Descriptions.Item>
          <Descriptions.Item label="所属厂商">厂商一</Descriptions.Item>
        </Descriptions>
        <h3 className={'ant-descriptions-title'} style={{marginTop:'18px'}}>水表历史数据</h3>
        <div>
          <ButtonGroup>
            <Button  onClick={() => this.selectDate('month')} type={this.isActive('month')?'primary':''}>本月</Button>
            <Button  onClick={() => this.selectDate('year')} type={this.isActive('year')?'primary':''}>本年</Button>
          </ButtonGroup>

          <DatePicker
            value={this.state.rangePickerValue[0]}
            allowClear={false}
            format="YYYY-MM-DD"
            style={{width: 150}}
            placeholder={'开始日期'}
          />
          <DatePicker
            allowClear={false}
            value={this.state.rangePickerValue[1]}
            format="YYYY-MM-DD"
            placeholder={'结束日期'}
            style={{width: 150}}
          />
          <span style={{marginLeft:'10px',fontWeight:'bold',fontSize:'18px'}}>用水量: 12.78 吨</span>
        </div>
        <div style={{height:'320px',background:'#222'}}><ReactEcharts
          option={this.getOption()}
          style={{ height: '100%', width: '100%' }}
          theme='my_theme'
          //onChartReady={this.onChartReadyCallback}
          //onEvents={EventsDict}
        />
        </div>
        <h3 className={'ant-descriptions-title'} style={{marginTop:'20px'}}>水表操作</h3>
        <Button type="primary" block style={{marginBottom:'10px'}}>
          点抄
        </Button>
        <Button block className={'btn-purple'} style={{marginBottom:'10px'}}>开阀</Button>
        <Button type="danger" block style={{marginBottom:'10px'}}>
          关阀
        </Button>

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


